<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- layui的核心css-->
    <link rel="stylesheet" href="../css/layui.css">
    <!-- layui的核心js-->
    <script src="../layui.js"></script>
</head>
<body>
    <div class="demoTable">
        搜索id
        <div class="layui-inline">
            <input class="layui-input" name="id" id="demoReload" autocomplete="off">
        </div>
        <button class="layui-btn" id="searchBtn">搜索</button>
    </div>

    <!-- 准备容器,设置id属性 -->
    <table id="demo" lay-filter="test"></table>
    <hr>

    <!-- 表格工具栏 -->
   <script type="text/html" id="toolbarDemo">
       <div class="lay-btn-container">
           <!-- lay-event给元素绑定事件名 -->
           <button class="layui-btn layui-btn-sm" lay-event="getCheckData">
               获取选中行数据
           </button>
           <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">
            获取选中数目
        </button>
        <button class="layui-btn layui-btn-sm" lay-event="isALL">
            验证是否全选
        </button>
       </div>
   </script>

   <!-- 表头工具栏 -->
   <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event='edit'>编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event='del'>删除</a>
   </script>
      
    <script>
        layui.use('table', function(){
        var table = layui.table;
        var $ = layui.jquery;//获取jquery对象
    //   加载数据表格
    table.render({
        elem:'#demo',//用来绑定容器的id属性值
        url:"../use.json",//后台数据接口
        cols:[[
            // 设置序列号
            {field:"aa",type:'numbers'},
            // 设置复选框
            {field:"aa",type:'checkbox'},
            // 加hide:true会隐藏
            {field:"id",title:'用户编号',sort:true,width:120,hide:true},
            {field:"username",title:'用户信息',width:100,edit:'text'},
            {field:"sex",title:'性别',sort:true,width:100},
            {field:"city",title:'城市',width:100},
            {field:"sign",title:'签名',edit:'text'},
            // 设置表头工具栏
            {field:"操作",toolbar:'#barDemo'},
        ]],
        // 开启分页
        page:true,
        // 设置表格工具栏
        toolbar:"#toolbarDemo",
        // 

    }) 
    // 头监听事件
    // 语法   table.on("toolbar(demo)",function(obj){

    // });
    //注释：demo表示的是容器上设置的lay-filter属性值

        table.on('toolbar(test)',function(obj){
            console.log(obj);
            // obj.config对象中可以获得id属性值，
            // 即表示当前容器的ID值，也就是demo
            // 获取当前表格被选中记录对象，返回数据

            var checkStatus = table.checkStatus(obj.config.id)
            // console.log(checkStatus);
            // 获取事件名
            var eventName = obj.event;
            // 判断事件名，执行对应的代码
            switch(eventName){
                case 'getCheckData':
                    // 获取被选中的记录的数组
                    var arr = checkStatus.data;
                    // 将数组解析成字符串
                    layer.alert(JSON.stringify(arr));
                break;
                case 'getCheckLength':
                    // 获取被选中的记录的数组
                    var arr = checkStatus.data;
                    layer.msg("选中了"+ arr.length + "条数据")
                break;
                case 'isALL':
                    // 通过isALL属性，判断是否全选
                    var flag = checkStatus.isALL;
                    var str = flag ? "全选" : "未全选";
                    // layer.msg(str)
                break;
                default:
                break;
            }
        });

        // 监听行工具栏事件
        table.on('tool(test)',function(obj){
            // 得到当前行的相关信息
            var tr = obj.data;
            // console.log(tr);
            // 得到事件名
            var eventName = obj.event;
            console.log(eventName);
            // 判断时间名，执行对应的方法
            if(eventName == 'del'){ //删除
                // 确认框
                layer.confirm("您确认要删除吗？",function(index){
                    obj.del();
                    // 关闭弹出层(index是当前弹出层的下标)
                    layer.close(index);
                });
            }else if(eventName == 'edit'){//编辑
                // 输入框
                layer.prompt({
                    //表单元素的类型 0-文本框   1-密码框  2-文本域
                    foremType:0,
                    value:tr.username//设置输入框的值
                },function(value,index){
                    // 修改制定单元格的值
                    // value表示输入的值
                    obj.update({
                        userName:value
                    });
                    // 关闭弹出层
                    layer.close(index);
                });
            }
        })


    // 监听单元格编辑事件
    // 表头设置edit属性 单元格编辑类型(默认不开启)，目前只支持:text(输入框)
        table.on("edit(test)",function(obj){
            console.log(obj);
            // 获取修改后得值
            var value = obj.value;
            // 得到当前修改的tr对象
            var data = obj.data;
            // 得到修改的字段名
            var field = obj.field;
            layer.msg("[ID:"+data.id+"]的"+field+"字段的值修改为"+value);
        })

     // 给指定元素绑定事件
     $(document).on('click',"#searchBtn",function(data){
        // 获取搜索文本框对象
        var searchtext = $("#demoReload")
        // 调用数据表格的重载方法  table.reload(ID, options, deep)
        table.reload("demo",{
            where:{//设置需要传递的参数
                id:sreach.val(),
                name:'zhnagsan'
            },
            page:{
                // 表示让条件查询从第一页开始，如果未设置，则从当页开始查询，
                // 此页前面的所有数据不纳入条件筛选
                curr:1  //从第一页开始
            }
        })
     })

        });
    </script>
</body>
</html>